const inputBarrDom = document.querySelector("#inputButt");
const barrageDom = document.querySelector("#barrage");
const btn = document.querySelector("#btn");
const video=document.querySelector("video")
video.play()
video.loop=true;
console.log(video);
/** @type {HTMLCanvasElement} */

console.log(barrageDom.clientHeight);


// 定义点击事件
btn.onclick = () => {
  const x = inputBarrDom.value;
  // console.log(x);
  // 添加完成后，清空输入框
  window._barrage.addTestList([x])
  inputBarrDom.value = null;
  // console.log(barr);
};

class Barrage {
  constructor(canvas, roadList) {
    this.canvas = document.querySelector(canvas);
    this.ctx = this.canvas.getContext("2d");
    this.canvasHeight = 300;
    this.canvasWidth = 600;
    this.canvas.width = this.canvasWidth;
    this.canvas.height = this.canvasHeight;
    this.waitingList = []; //等待中的弹幕
    this.sendingList = []; //正在发送
    this.fontSize = 28;
    this.ctx.font = `${this.fontSize}px STheiti,SimHei`;
    this.roadList = []; //y轴上的通道
    this.initRoadList(roadList);
    this.draw=false
  }
  /**
   *
   * @param {number} roadList
   */
  initRoadList(roadList) {
    //初始化通道列表
    //最多存在弹幕行数
    const maxHighwayAmount = parseInt(this.canvasHeight / (this.fontSize + 20));
    //如果传入的行数大于最大行数，取最大行数
    maxHighwayAmount < roadList ? (roadList = maxHighwayAmount) : "";
    //roadList弹幕行数
    for (let i = 1; i <= roadList; i++) {
      this.roadList.push((this.fontSize + 20) * i);
    }
  }
  /**
   *
   * @param {string} text
   * @returns {object}
   */
  createBarrageInfo(text) {
    //barrage-Info
    let color = ["#FFE1FF", "#FFB5C5", "#63B8FF"];
    return {
      value: text,
      top: this.roadList.splice(0, 1)[0], //占用第一个通道并移除
      left: this.canvasWidth,
      color: color[Math.floor(Math.random() * 3)],
      speed: 1,//Math.ceil(Math.random() * 3),//控制速度
      width: Math.ceil(this.ctx.measureText(text).width), //弹幕占用的宽度
      occupation: true, //占用top状态
    };
  }
  drawBarrage() {
    console.log('ces');
    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    this.sendingList.forEach((v, i) => {
      //判断当前弹幕已经完整经过了画布
      v.left + v.width <= 0 ? this.sendingList.splice(i, 1) : "";
    });
    // 绘制
    this.sendingList.forEach((item)=>{
      this.ctx.fillStyle=item.color //设置弹幕颜色
      this.ctx.fillText(`${item.value}`,item.left,item.top)
      item.occupation && item.left+item.width<=this.canvasWidth ? this.consumeText(item) :''
      item.left-=1
    })
    this.sendingList.length == 0 ? this.draw=false : requestAnimationFrame(this.drawBarrage.bind(this))

  }
  consumeText(item){
    console.log(item);
    // 当弹幕是占用状态，并且已经完整显示在canvas中的时候，将不再占用top
    item.occupation=false;
    // 500ms后释放占用状态
    setTimeout(() => {
      this.roadList.push(item.top)//释放
      // 同时检查待发送的列表是否有弹幕，如果有插入到新的，并且指定通道
      if(this.waitingList.length!=0){
        this.sendingList.push(this.createBarrageInfo(this.waitingList.splice(0,1)[0]))
      }
    }, 500);
  }
  addTestList(arr){
    //判断是否处于绘制状态
    if(this.draw){ 
      //判断是否有空余的highwayAmount可以使用
      if(this.roadList.length != 0){
          let barrageList = arr.splice(0,this.roadList.length)
          for(const val of barrageList){
              this.sendingList.push(this.initTest(val))
          }
      }
      this.waitingList.push(...arr)
  }else{
      this.waitingList.push(...arr)
      //将绘制状态置为true
      this.draw = true
      this.runBarrage()
    }
  }
  runBarrage(){
    this.waitingList.splice(0,this.roadList.length).forEach((val)=>{
      this.sendingList.push(this.createBarrageInfo(val))
    })
    this.drawBarrage()
  }
}

function init(){
  const barrage = new Barrage("#tuto", 4); //canvas的区域  指定几条通道
  barrage.addTestList(['测试1','测试2','测试3','测试4','测试5','测试6','测试7','测试8'])
  window._barrage=barrage
}
init()
